<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService";

export default {
  name: "AddLineWithDirectionMarker.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setCenter([121.49, 31.265])
      map.setZoom(16)

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_LINE_LAYER).addTo(map);

      let line = new maptalks.LineString(
          [
            [121.486532373184, 31.261925842451],
            [121.48760525679, 31.2623660518534],
            [121.488763971084, 31.2639067685916],
            [121.489665193313, 31.2648238499456],
            [121.491939706557, 31.2642736022027],
          ],
          {
            symbol: {
              "lineColor": "#1bbc9b",
              "lineWidth": 6,
              // "lineDasharray": [10, 10],
              "markerFile": filter("relativePath2Img")("plane.png"),
              "markerPlacement": "point", //vertex, point, vertex-first, vertex-last, center
              "markerVerticalAlignment": "middle",
              "markerWidth": 10,
              "markerHeight": 10
            }
          }
      ).addTo(layer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
